<template>
  <div class="header-container">
    <div class="right">
      <div>
        <img src="../../../assets/u2.png" alt="" class="img" />
      </div>
      <div class="title">
        帮助中心
      </div>
    </div>
    <div class="left">
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入关键字,如：一件代发、发货计划..."
        @select="handleSelect"
      >
        <template slot-scope="{ item }">
          <div class="custom-item">
            <div class="item-value">{{ item.title }}</div>
            <div class="item-address" >
              {{ item.content }}
            </div>
          </div>
        </template>
      </el-autocomplete>
    </div>
  </div>
</template>

<script>
import { getChapterList } from "@/api/helpDocument";
import _ from "lodash";

export default {
  name: "Header",
  data() {
    return {
      state: '',
      timeout: null
    };
  },
  methods: {
    // 使用 lodash 的 debounce 函数包装 querySearchAsync 方法
    querySearchAsync: _.debounce(function(queryString, cb) {
      getChapterList({ keyword: queryString,type:2,system_type:0 }).then((res) => {
        cb(res.data); // 将接口返回的数据传递给 el-autocomplete 组件
      }).catch((error) => {
        console.error('Error fetching suggestions:', error);
        cb([]); // 出错时返回空数组或者处理错误信息
      });
    }, 500), // 设置 debounce 的延迟时间，单位毫秒

    handleSelect(item) {
      this.$emit('header-clicked', item.id); // 触发自定义事件
    }
  }
};
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
}
.right {
  display: flex;
  justify-content: space-between;
}
.title {
  color: black;
  font-size: 18px;
  margin-top: 18px;
  font-weight: bold;
}
.img {
  margin: 5px 10px;
  width: 150px;
  height: 50px;
}
.left {
  margin: 10px 50px;
}
.el-autocomplete {
  width: 400px;
}
.custom-item {
  display: flex;
  flex-direction: column;
}
.item-value {
  font-weight: bold;
}
.item-address {
  font-size: 12px;
  color: gray;
}
</style>
